<template>
  <div class="div_box">
    <div style="min-width: 1600px;">
      <el-form :inline="true" :model="searchReportForm" @keyup.enter.native="getReportList()">
        <el-form-item>
          <el-input v-model="searchReportForm.taskId" placeholder="TODO" title="TODO" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchReportForm.taskId" placeholder="TODO" title="TODO" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchReportForm.taskId" placeholder="TODO" title="TODO" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getReportListByCondition()">查询</el-button>
          <el-button type="danger" :disabled="reportListSelections.length <= 0" @click="deleteHandle()">批量删除</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="reportListLoading" :data="reportList.filter(data => !searchReportList || data.taskName.toLowerCase().includes(searchReportList.toLowerCase()) || data.scriptName.toLowerCase().includes(searchReportList.toLowerCase()) || data.status.toLowerCase().includes(searchReportList.toLowerCase()))" border style="width: 100%;" @selection-change="selectionChangeHandle">
        <el-table-column type="selection" header-align="center" align="center" width="50" />
        <el-table-column prop="taskId" header-align="center" align="center" label="任务ID" width="65" />
        <el-table-column prop="taskName" header-align="center" align="center" label="任务名称" sortable />
        <el-table-column prop="scriptName" header-align="center" align="center" label="脚本名称" sortable />
        <el-table-column prop="todo" header-align="center" align="center" label="QPS" sortable />
        <el-table-column prop="remark" header-align="center" align="center" label="备注" />
        <el-table-column prop="startTimeStr" header-align="center" align="center" label="开始时间" sortable width="160" />
        <el-table-column prop="endTimeStr" header-align="center" align="center" label="结束时间" sortable width="160" />
        <el-table-column prop="percentAge" header-align="center" align="center" label="执行进度" sortable width="300">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>限定QPS为: {{ scope.row.qps }}</p>
              <div slot="reference" class="name-wrapper">
                <el-progress v-if="scope.row.status === 'RUNNING' || scope.row.status === 'FINISHED'" :text-inside="true" :stroke-width="18" :percentage="scope.row.percentAge" status="success" />
                <span v-if="scope.row.status === 'WAITING' || scope.row.status === 'STOPPED' || scope.row.status === 'ERROR'">{{ scope.row.status }}</span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
          <template slot="header">
            <el-input
              v-model="searchReportList"
              size="mini"
              placeholder="根据任务、名称、状态模糊筛选"
            />
          </template>
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="getDetail(scope.row)">详情</el-button>
            <el-button v-if="scope.row.status === 'running'" type="text" size="small" @click="stopTask(scope.row)">停止</el-button>
            <el-button v-if="scope.row.status === 'waiting' || scope.row.status === 'finished' || scope.row.status === 'stopped' || scope.row.status === 'error'" type="text" size="small" @click="deleteReport(scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="reExecution(scope.row)">重新执行</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
      <el-dialog
        title="QPS & 报告备注"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="reExecutionform" label-position="left" label-width="80px">
          <el-form-item label="QPS">
            <el-input v-model="reExecutionform.qps" placeholder="指定QPS,不填或错填则不限制" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="reExecutionform.remark" placeholder="报告执行备注信息,不填则为NA" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { searchAll, deleteReport, stop, reExecution } from '@/api/perf/report.js'
export default {
  name: 'PerfReport',
  data() {
    return {
      // report Table数据
      reportList: [],
      searchReportList: '',
      // 查询Form数据
      searchReportForm: {
        taskId: ''
      },
      // Table的v-loading
      reportListLoading: false,
      // Table中的多选，通过selectionChangeHandle方法添加或删除
      reportListSelections: [],
      // 分页查询初始化数据
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      // 显示报告详情控制开关
      reportDetailVisible: false,
      dialogVisible: false,
      reExecutionform: {}
    }
  },
  created() {
    // 初始化查询
    this.getReportList()
  },
  activated() {
    // 初始化查询
    this.getReportList()
  },
  methods: {
    // 查询report列表
    getReportList() {
      this.reportListLoading = true
      searchAll(this.pageIndex, this.pageSize).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.reportList = data.content
          this.totalPage = data.totalElements
        } else {
          this.$message.error(respnose.message)
          this.reportList = []
          this.totalPage = 0
        }
        this.reportListLoading = false
      })
    },
    getReportListByCondition() {
      this.getReportList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getReportList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getReportList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.reportListSelections = val
    },
    // 批量删除方法 TODO
    deleteHandle(id) {
      var ids = id ? [id] : this.reportListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/config/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({
          respnose
        }) => {
          if (respnose && respnose.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(respnose.message)
          }
        })
      }).catch(() => {})
    },
    // 显示报告详情
    getDetail(row) {
      // 这里不要删除缓存了
      // this.$store.dispatch('tagsView/delView', { name: 'PerfReportDetail', path: '/perf/perf-report-detail' })
      this.$nextTick(() => {
        this.$router.push({
          name: 'PerfReportDetail',
          params: {
            reportId: row.id
          }
        })
      })
    },
    // 删除报告
    deleteReport(row) {
      deleteReport(row.id).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.$message.success(respnose.message)
          this.getReportList()
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    // 停止任务
    stopTask(row) {
      stop(row.id).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.$message.success(respnose.message)
          this.getReportList()
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    // 重新开始任务
    reExecution(row) {
      this.reExecutionform = { id: row.id }
      this.dialogVisible = true
    },
    onSubmit() {
      if (!this.reExecutionform.remark) {
        this.reExecutionform.remark = 'NA'
      }
      if (this.reExecutionform.qps === null || !(this.reExecutionform.qps > 0)) {
        this.reExecutionform.qps = 0
      }
      reExecution(this.reExecutionform.id, this.reExecutionform.qps, this.reExecutionform.remark).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.$message.success(respnose.message)
          this.getReportList()
          this.dialogVisible = false
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    handleClose(done) { done() }
  }
}
</script>

<style scoped="scoped">
.div_box {
  border: 1px solid #eee;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}
</style>
